<template>
  <a-layout class="login-box">
    <a-layout-header class="header">
      <login-header />
    </a-layout-header>
    <a-layout-content class="container">
      <div class="login-swiper">
        <img src="@/assets/images/login_bg.png" alt="" />
      </div>
      <div class="login-form">
        <LoginForm
          v-if="loginType === 0"
          @login-success="loginSuccess"
          @change-login-type="loginType = 1"
        />
        <QrLogin
          v-if="loginType === 1"
          @login-success="loginSuccess"
          @change-login-type="loginType = 0"
        />
      </div>
    </a-layout-content>
    <select-tenant ref="selectTenant" />
  </a-layout>
</template>

<script setup lang="ts">
  import LoginForm from '@/views/login/components/login-form.vue';
  import { ref } from 'vue';
  import QrLogin from '@/views/login/components/qr-login.vue';
  import { Message } from '@arco-design/web-vue';
  import SelectTenant from '@/components/select-tenant/index.vue';
  import LoginHeader from '@/views/login/components/login-header.vue';

  const loginType = ref(0);
  const selectTenant = ref<InstanceType<typeof SelectTenant>>();

  const loginSuccess = () => {
    selectTenant.value?.open();
    // const { redirect, ...othersQuery } = router.currentRoute.value.query;
    // router.push({
    //   name: (redirect as string) || 'Workplace',
    //   query: {
    //     ...othersQuery,
    //   },
    // });
    // Message.success('登录成功!');
  };
</script>

<style scoped lang="less">
  .login-box {
    width: 100vw;
    height: 100vh;
    background: #f0f3fc;
    display: flex;
    align-items: center;
    justify-content: center;

    .container {
      height: 100vh;
      display: flex;
      gap: 10vw;
      background: #f0f3fc;
      align-items: center;
      justify-content: center;

      position: relative;
    }

    .login-swiper {
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 600px;
      }
    }

    .login-form {
      min-width: 400px;
      min-height: 480px;
      padding: 80px 40px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      box-shadow: 0px 19px 39px 0px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(20px);
    }
  }
  .header {
    height: 60px;
    width: 100%;
    background-color: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
